import React, { Component } from "react";
import {Header, Segment, Form, Button, Progress, Loader, Dimmer} from "semantic-ui-react";
import WalletTools from '../servises/service'
import fileSaver from 'file-saver'
class SettingTab extends Component {

    state = {progress : '',pwd:'',loading:false,}

    handleChange = (e,{name,value})=>{
        this.setState({[name]:value})
        console.log(name,value)
    }

    onExportPrivate = ()=>{
        let wallet  = this.props.walletPointer
        alert(wallet.signingKey.privateKey)
    }


    onExportClick = async ()=>{
        try{
            this.setState({loading:true})
            let keyStore = await WalletTools.exportKeyStoreFromWallet(this.props.walletPointer,this.state.pwd,progress=>{this.setState({progress})})
            console.log('keyStore:',keyStore)
            this.setState({loading:false,progress:''})
            let blob = new Blob([keyStore],{type:"text/plain;charset=utf-8"})
            fileSaver.saveAs(blob,"keyStore.json")
            alert("keyStore倒出成功，请妥善保管！")
        }catch (e) {
            alert(e);
            this.setState({loading:false,progress:''})
            return ''
        }


    }

    render() {
        return (
            <Dimmer.Dimmable as={Segment} dimmed={this.state.loading}>
            <Segment stacked textAlign="left">
                <Header as="h1"> 设置 </Header>
                <Form.Input
                    style={{
                        width: "100%"
                    }}
                    action={{
                        color: "teal",
                        labelPosition: "left",
                        icon: "lock",
                        content: "密码"
                    }}
                    actionPosition="left"
                    type="password"
                    name="pwd"
                    required
                    value={this.state.pwd}
                    placeholder="密码"
                    onChange={this.handleChange}
                />
                <br />
                {this.state.progress && (
                    <Progress
                        style={{
                            width: "100%"
                        }}
                        percent={parseInt(this.state.progress * 100)}
                        inverted
                        success
                        progress
                    />
                )}
                <Dimmer active={this.state.loading} inverted>
                    <Loader active={this.state.loading} inline />
                </Dimmer>
                <Button
                    color="twitter"
                    style={{ width: "48%" }}
                    onClick={this.onExportPrivate}
                >
                    查看私钥
                </Button>
                <Button
                    color="twitter"
                    style={{
                        width: "48%"
                    }}
                    onClick={this.onExportClick}
                    // loading={this.state.exportLoading}
                >
                    导出keystore
                </Button>
            </Segment>
            </Dimmer.Dimmable>
        );
    }
}

export default SettingTab;